<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>mydemo</title>
	<style type="text/css">
		body,ul,li,p {margin:0;padding:0;}
		li {list-style-type:none;}

		#outer {width:300px;margin:10px auto;}
		/* 头部样式 */
		#head {background:black;color:white;height:19px;text-align:right;font-size:10px;padding-top:1px;}
		/* 输出样式 */ 
		#content p {background:#C0C0C0FF;width:290px;height:20px;text-align:right;padding-right:10px;}
		#content p:last-child {height:60px;line-height:45px;font-size:40px;}
		/* 输入样式 */
		#input {padding:0 0 30px 20px;text-align:center;background:#A0A0A0FF;overflow:hidden;zoom:1;}
		#top li,#left li,#right li {width:50px;height:25px;padding-top:5px;margin:30px 20px 0 0;background:black;color:white;cursor:pointer;}
		#top li,#right li{background:#303030FF;}
		#right li:last-child {background:orange;}

		#top {float:left;width:280px;}

		#left {float:left;width:210px;}
		#top li,#left li {display:inline-block;float:left;}
		#left li:nth-last-of-type(2) {width:120px;}

		#right {width:70px;float:left;}
		#right li:last-child {height:55px;padding-top:35px;}
	</style>
	<script type="text/javascript">
		window.onload = function() {
			var oLi = document.getElementById("input").getElementsByTagName("li");
			var oF = document.getElementById("content").getElementsByTagName("p")[0];
			var oResult = document.getElementById("content").getElementsByTagName("p")[1];
			var s = false;
			for(var i=0;i<oLi.length;i++) {
				oLi[i].onclick = function() {
					switch(this.innerHTML) {
						case "C":
							oF.innerHTML = "0";
							oResult.innerHTML = "";
							break;
						case "%":
                            count("%");
                            break;
                        case "÷":
                            count("/");
                            break;
                        case "×":
                            count("*");
                            break;
                        case "-":
                            count("-");
                            break;
                        case "+":
                            count("+");
                            break;
                        case "=":
                        	break;
                        case ".":
                        	break;
                        default :
                        	s || (oF=0;oResult="";s=false;);
                        	oF.innerHTML.length < 10 && (oF.innerHTML = (oF.innerHTML+this.innerHTML))
					}

					function count() {

					}

				}
			}
		}
	</script>
</head>
<body>
	<ul id="outer">
		<li id="head">By-Ocvia:qq123456</li>
		<li id="content">
			<p></p>
			<p>0</p>
		</li>
		<div id="input">
			<ul id="top">
				<li>C</li>
				<li>%</li>
				<li>&divide;</li>		
				<li>&times;</li>
			</ul>
			<ul id="left">	
				<li>7</li>
				<li>8</li>
				<li>9</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>				
				<li>0</li>
				<li>.</li>
			</ul>

			<ul id="right">		
				<li>-</li>
				<li>+</li>
				<li>=</li>
			</ul>
		</div>
	</ul>
</body>
</html>